{% block sw_price_field %}
<div
    class="sw-price-field"
    :class="{
        'sw-price-field--label': label,
        'sw-price-field--compact': compact,
        'sw-price-field--disabled': isDisabled
    }"
>

    <div class="price-field-grid">

        {% block sw_price_field_gross %}
        {# TODO: check selectors #}
        <mt-number-field
            v-model="priceForCurrency.gross"
            class="sw-price-field__gross"
            :allow-empty="allowEmpty"
            :placeholder="$tc('sw-product.priceForm.placeholderPriceGross')"
            :label="labelGross"
            :help-text="grossHelpText"
            :validation="validation"
            :size="compact ? 'small' : 'default'"
            :min="0"
            :digits="20"
            :error="grossError"
            :disabled="isDisabled"
            :name="grossFieldName"
            v-bind="attributesWithoutListeners"
            @update:model-value="onPriceGrossChange"
            @keyup="keymonitor"
            @input-change="onPriceGrossInputChange"
            @ends-with-decimal-separator="onEndsWithDecimalSeparator"
        >
            <template
                v-if="!disableSuffix && !compact"
                #suffix
            >
                {{ currency.symbol }}
            </template>
        </mt-number-field>
        {% endblock %}

        {% block sw_price_field_lock_button %}
        <button
            class="sw-price-field__lock"
            :class="{
                'is--locked': priceForCurrency.linked,
                'is--disabled': isDisabled
            }"
            :aria-label="$t('global.sw-price-field.toggleLinkedCurrency')"
            :aria-pressed="priceForCurrency.linked"
            @click="onLockSwitch"
        >
            <mt-icon
                v-if="priceForCurrency.linked"
                name="regular-lock"
                size="16"
            />
            <mt-icon
                v-else
                name="regular-lock-open"
                size="16"
            />
        </button>
        {% endblock %}

        {% block sw_price_field_net %}
        <mt-number-field
            v-model="priceForCurrency.net"
            class="sw-price-field__net"
            :allow-empty="allowEmpty"
            :placeholder="$tc('sw-product.priceForm.placeholderPriceNet')"
            :label="labelNet"
            :help-text="netHelpText"
            :validation="validation"
            :size="compact ? 'small' : 'default'"
            :min="0"
            :digits="20"
            :error="netError"
            :disabled="isInherited || disabled"
            :name="netFieldName"
            v-bind="attributesWithoutListeners"
            @update:model-value="onPriceNetChange"
            @keyup="keymonitor"
            @input-change="onPriceNetInputChange"
            @ends-with-decimal-separator="onEndsWithDecimalSeparator"
        >
            <template
                v-if="!disableSuffix && !compact"
                #suffix
            >
                {{ currency.symbol }}
            </template>
        </mt-number-field>
        {% endblock %}
    </div>

    <sw-container
        v-if="allowModal"
        justify="end"
        class="sw-price-form__links"
    >
        <a
            class="sw-card__quick-link"
            role="link"
            tabindex="0"
            @click.prevent="showModal = true"
            @keydown.enter.prevent="showModal = true"
        >
            {{ $tc('sw-product.detailBase.linkMaintainCurrencyPrices') }}
            <mt-icon
                name="regular-long-arrow-right"
                size="16px"
            />
        </a>
    </sw-container>

    <sw-maintain-currencies-modal
        v-if="showModal"
        :prices="value"
        :default-price="priceForCurrency"
        :tax-rate="taxRate"
        :disabled="false"
        :hide-list-prices="hideListPrices"
        @modal-close="onCloseModal"
    />

</div>
{% endblock %}
